<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的数据代理</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <div id="root">
        <h2>{{name}}</h2>
        <h2>{{address}}</h2>

    </div>
    <div>
        <img src="./js/21.png">
    </div>


    <script>
        //Vue的原理:vm把拿到的data数据保存到vm._data里面
        //1.vue的数据代理:通过vm对象代理data对象中属性的操作（读、写）
        //2.原理：
        //通过Object.defineProperty()把data对象中所属添加到vm上放在vm._data上
        //为每一个添加到vm上的属性，都指定一个getter,setter
        //在getter,setter内部去操作data中的对应的属性



        //data里面定义的数据，Vue底层通过数据代理Object.defineProperty() 加在了vm实例_data身上
        //当有人修改或读取vm实例上面的_data数据时，setter（）函数或getter()函数，去找data中的数据修改成_data中的数据或读取，
        //而当data中的数据发生变化时，那么页面中用到改数据的地方也会自动更新

        //-数据代理，通过一个对象代理对另一个对象中属性的操作

        const vm = new Vue({
            el: '#root',
            data: {
                name: " 周结婚11 ",
                address: 'hahh'
            }
        })
        console.log(vm)
    </script>






</body>

</html>